body{
    --htcolor:pink;
    --angle:45deg;
}

.ht::before{
display:inline-block;
width: 50px;
height: 75px;
background-color: var(--htcolor,pink);
content: "";
transform-origin: 50px 25px;
transform: rotate(-45deg);


}
.ht::after{
  
   display:inline-block;
    width: 50px;
    height: 75px;
    background-color: var(--htcolor,pink);
    content: "";
    transform-origin: 0px 25px;
    transform: rotate(45deg);

 
    
    }

    .ht::before,.ht::after{
border-radius: 25px 25px 0px 0px;

}
.ht{
  
 position: absolute;
 
 /*transform: rotate(var(--angle));*/


 animation-iteration-count: infinite;
 animation-direction: normal;
animation-timing-function: ease-in-out;/*
transform-origin: 50% -100%;*/
}
.container{
 
    animation: drop;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: ease-in-out;
    
    position: absolute;
   
    
}
@keyframes demon{
    0%{
        opacity: 1;

    }

    
    75%{
opacity: 0.85;
transform: translateY(500px) translateX(1200px);

    }
    100%{
        opacity: 0;
        transform: translateY(600px) translateY(1400px);


    }
}

@keyframes fade
{
    0%   { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes drop
{
    0%   {  }

    100% {top: 80%; }
}
@keyframes clockwiseSpin
{
    
    0%   { transform:scale(-1, 1) rotate(-50deg) ; }
    100% { transform:scale(-1, 1) rotate(50deg); }
}
@keyframes counterclockwiseSpinAndFlip 
{
    0%   { transform: scale(-1, 1) rotate(50deg); }
    100% { transform: scale(-1, 1) rotate(-50deg); }
}
    